<template>
  <div class="menu-detail">
    <detail-header :menuInfo="menuInfo" />
    <detail-content :menuInfo="menuInfo" />
    <comment :menuInfo="menuInfo" />
  </div>
</template>

<script>
import DetailHeader from "./detail-header";
import DetailContent from "./detail-content";
import Comment from "./comment";

import { menuInfo } from "@/service";

export default {
  name: "Detail",

  components: {
    DetailHeader,
    DetailContent,
    Comment,
  },

  data() {
    return {
      menuInfo: {
        userInfo: {},
        raw_material: {
          accessories_material: [],
          main_material: [],
        },
      },
    };
  },

  watch: {
    $route: {
      async handler() {
        let { menuId } = this.$route.params;
        if (menuId) {
          const res = await menuInfo({ menuId });
          this.menuInfo = res.data.info;
        } else {
          this.$message({
            message: "请选择菜品进入详情！",
            type: "warning",
          });
        }
      },
      immediate: true,
    },
  },
};
</script>

<style>
</style>